<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2>Cart Page</h2>
          <ul>
            <li><router-link to="/">home</router-link></li>
            <li class="active">Cart Page</li>
          </ul>
        </div>
      </div>
    </div><!-- shopping-cart-area start -->
    <div class="cart-main-area pt-95 pb-100">
      <div class="container">
        <h3 class="page-title">Your cart items</h3>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-12">
            <form action="#">
              <div class="table-content table-responsive">
                <table style="width: 20px;">
                  <thead>
                  <tr>
                    <th>Product</th>
                    <th>Product Name</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Total Price</th>
                    <th>Inventory</th>
                    <th>Delete</th>
                  </tr>
                  </thead>
                  <tbody style="width: 20px;">
                  <tr v-for="cart in cartList">
                    <td class="product-thumbnail">
                      <router-link :to="{name:'viewItem',query:{itemId:cart.itemId,productId:cart.productId,cart:cart.catId}}">
                        <img :src="cart.iImage" alt="">
                      </router-link>
                    </td>
                    <td class="product-name">
                      <router-link :to="{name:'viewItem',query:{itemId:cart.itemId,productId:cart.productId,cart:cart.catId}}">{{cart.iName}}</router-link>
                    </td>
                    <td class="product-price-cart">${{cart.listPrice}}</td>
                    <td class="product-quantity">
                      <div class="cart-plus-minus">
                        <input class="cart-plus-minus-box" type="text" name="qtybutton" value="cart.qty" v-model="cart.qty" @blur="updateCart(cart.itemId,cart.qty)">
                      </div>
                    </td>
                    <td class="product-price-cart">$ {{cart.total}}</td>
                    <td class="product-price-cart" v-if="cart.inStock == true">Adequate</td>
                    <td class="product-price-cart" v-if="cart.inStock == false">Inventory shortage</td>
                    <td class="product-price-cart"><i class="ti-trash" data-toggle="modal" data-target="#myModal" @click="chooseItem(cart.itemId)"></i></td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <div class="cart-shiping-update-wrapper">
                    <div class="cart-shiping-update">
                      <router-link :to="{name:'index'}">
                        Continue Shopping
                      </router-link>
                    </div>
                    <div class="cart-shiping-update" @click="clearCart"><a>Clear Shopping Cart</a></div>
                  </div>
                </div>
              </div>
            </form>
            <div class="row" style="left: 800px;position: relative">
              <div class="col-lg-4 col-md-12" >
                <div class="grand-totall"><span>Total Price : ${{totalPrice}}</span>
                  <router-link to="/order/viewNewOrder">Proceed To Checkout</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Remove goods...</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            Are you sure you want to remove this item from your shopping cart?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="removeItem">Remove</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cart from "../../../static/js/pet/cart";
export default {
  ...cart

}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
